<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>订单详情</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>

	<body>
		<div class="mui-content">
			<!-- 订单状态 -->
			<div class="order-status">
				<div class="status-info">
					<div class="status-name">
						<!-- 根据页面传值来定义文字 -->
						待收货
					</div>
					<div class="status-title">
						商品已发出 请您及时查收~
					</div>
				</div>
				<div class="status-img">
					<img id="status-img" src="../../../../images/cart/icon_order_state_dsh.png" class="order_state">
				</div>
			</div>
			<!-- 地址 -->
			<div class="address">
				<img src="../../../../images/cart/icon_order_location.png" class="order_location">
				<div class="info">
					<div class="user-info">
						<span class="username">张三</span>
						<span class="userphone">185461312121</span>
					</div>
					<div class="user-address">
						<span>河南省</span>&nbsp<span>郑州市</span>&nbsp<span>金水区</span>&nbsp<span>黄河路1号璞丽中心B座701室</span>
					</div>
				</div>
			</div>
			<!-- 线条 -->
			<img src="../../../../images/cart/icon_order_ribbon.png" class="order_ribbon">
			<!-- 商品列表 -->
			<div class="goods-list">
				<div class="cart-list-item">
					<div class="recommend-list-item">
						<img src="../../../../images/home/demo.jpg" class="recommend-img">
						<div class="recommend-info">
							<div class="goods-info">
								<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
									今日下单即赠新品...</span>
								<span class="goods-code">编号:1234</span>
							</div>
				
							<div class="goods-last">
								<span class="goods-price">￥<span
										class="fuhao">69.80</span></span>
				
								<div class="goods-number">
									x<span class="order-num">56</span>
								</div>
							</div>
				
						</div>
					</div>
					<div class="recommend-list-item">
						<img src="../../../../images/home/demo.jpg" class="recommend-img">
						<div class="recommend-info">
							<div class="goods-info">
								<span class="goods-title">欧莱雅黑精华抗衰老紧致补水保湿精华液官方正品50mL
									今日下单即赠新品...</span>
								<span class="goods-code">编号:1234</span>
							</div>
				
							<div class="goods-last">
								<span class="goods-price">￥<span
										class="fuhao">69.80</span></span>
				
								<div class="goods-number">
									x<span class="order-num">56</span>
								</div>
							</div>
				
						</div>
					</div>
					<div class="cart-list-item-bottom">
						<div class="order-youhui">
							<span id="">
								已优惠<span class="youhui-num">20.00</span>元 ,
							</span>
						</div>
						<div class="order-status1">
							实付: <span class="fuhao">￥</span><span
								class="shifu-num">180.00</span><span
								class="no-yunfei">(免运费)</span>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 订单详情 -->
			<div class="order-detail">
				<div class="detail-title">
					<span class="line"></span>
					<span>订单信息</span>
				</div>
				<div class="detail-info-list">
					<div class="detail-info-item">
						<span class="item-name">订单编号：</span>
						<span class="item-code">202103201630260001</span>
					</div>
					<div class="detail-info-item">
						<span class="item-name">创建时间：</span>
						<span class="item-code">2021-03-20 16:30:26</span>
					</div>
				</div>
			</div>
		</div>
		<div class="order-btn-content">
			<!-- 根据业务逻辑渲染按钮 -->
			<div class="order-btn second-btn reorder-btn">
				再来一单
			</div>
			<!-- <div class="order-btn reorder-btn">
				立即支付
			</div>
			<div class="order-btn third-btn reorder-btn">
				申请退货
			</div>
			<div class="order-btn reorder-btn">
				发表评价
			</div>
			<div class="order-btn second-btn reorder-btn">
				查看退货单
			</div>
			<div class="order-btn reorder-btn">
				确认收货
			</div>
			<div class="order-btn second-btn reorder-btn">
				查看物流
			</div>
			<div class="order-btn reorder-btn third-btn">
				取消订单
			</div>
			<div class="order-btn reorder-btn second-btn">
				提醒发货
			</div> -->
		</div>
		<script src="../../../../js/mui.min.js"></script>
		<script src="../../../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../js/resize.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			$(function($) {
				// 文档一加载就执行
				$(document).ready(function() {
					obj.setRem()
				})
				// 页面自适应
				$(window).resize(function() {
					obj.setRem()
				});
				// 订单状态图
				var  order_state_dfk = '../../../../images/cart/icon_order_state_dfk.png';
				var  order_state_dfh = '../../../../images/cart/icon_order_state_dfh.png';
				var  order_state_dsh = '../../../../images/cart/icon_order_state_dsh.png';
				var  order_state_ywc = '../../../../images/cart/icon_order_state_ywc.png';
			});
		</script>
	</body>

</html>
